<template>
	<view class="order-content">
		<view class='head' @click='goAll'>
			<span>我的订单</span>
			<span>查看全部 ＞</span>
		</view>
		<view class='content'>
			<view class='view' @click='goPay'>
				<image class='img' src="@/static/order/pay.png"></image>
				<p>待付款</p>
			</view>
			<view class='view' @click='goSend'>
			  <image class='img' src="@/static/order/send.png"></image>
			  <p>待发货</p>
			</view>
			<view class='view' @click='goReceive'>
				<image class='img' src="@/static/order/receive.png"></image>
				<p>待收货</p>
			</view>
			<view class='view' @click='goComment'>
				<image class='img' src="@/static/order/comment.png"></image>
				<p>待评价</p>
			</view>
			<view class='view' @click='goRefund'>
				<image class='img' src="@/static/order/refund.png"></image>
				<p>退款/售后</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		methods:{
			goAll(){
				uni.navigateTo({
					url: '/pages/tab4/view/order/all?id=0'
				})
			},
			goPay(){
				uni.navigateTo({
					url: '/pages/tab4/view/order/all?id=1'
				})
			},
			goSend(){
				uni.navigateTo({
					url: '/pages/tab4/view/order/all?id=2'
				})
			},
			goReceive(){
				uni.navigateTo({
					url: '/pages/tab4/view/order/all?id=3'
				})
			},
			goComment(){
				uni.navigateTo({
					url: '/pages/tab4/view/order/all?id=4'
				})
			},
			goRefund(){
				uni.navigateTo({
					url: '/pages/tab4/view/order/all?id=5'
				})
			}
		}
	}
</script>

<style lang='scss'>
.order-content{
	width: 95%;
	height: 220rpx;
	margin-left: 2.5%;
	border-radius: 15rpx;
	background-color: white;
	border: 1rpx solid rgba(176,196,222,0.2);
	margin-top: 30rpx;
	color: #898D98;
	font-size: 28rpx;
	.head{
		width: 94%;
		height: 70rpx;
		margin-left: 3%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(176,196,222,0.2);
		span:first-child{
			color: #3F4249;
			font-size: 30rpx;
		}
	}
	.content{
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		.view{
			list-style-type: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			.img{
				width: 50rpx;
				height: 50rpx;
			}
			p{
				margin-top: 15rpx;
			}
		}
	}
}
</style>
